<template>
    <div>
        我是分类页
        <p v-color="'deeppink'">{{ count }}</p>
        <!-- 使用全局指令 -->
        <p v-font30="30">使用全局自定义指令</p>
        <!-- 使用全局自定义使用 -->
        <p>
            <button v-author>点我</button>
        </p>
    </div>
</template>

<script>
import { createApp } from 'vue';

// 指令的简写:
// 指令的作用: 就是用来操作原生dom,也就是第一个参数el
// 指令的分类:  局部指令 和全局指令
// 全局自定义指令语法:
// app.directive('指令名', (el, binding) => { }))
// 局部自定义指令: 
// directives:{指令名1(el, binding){},指令名2(el, binding){},....}

export default {
    data() {
        return {
            count: 100
        }
    },
    directives: {
        // 第一种写法: 属于常规写法
        // color: {
        //     mounted(el) {
        //         console.log();
        //     },

        // },
        // 第二种写法: 简写 
        // 将所有的生命周期函数整合到一起了
        color(el, binding, vdnode, preVnode) {
            console.log(el, binding, vdnode, preVnode);
            el.style.background = binding.value
        }
    }
}
</script>
<style scoped></style>